<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-13 18:51:05
 * @LastEditTime: 2023-07-14 15:06:34
 * @FilePath: \myblog\src\mviews\components\ArticleContent.vue
-->
<template>
  <div class="markdown-body blogm-article--content">
    <h1 class="blogm-article--title">{{article.title}}</h1>
    <ArticleBarInfo :nikname="nikname" :avatar="avatar" :hit_num="hit_num" :date="date" :comment_num="comment_num" :like_num="like_num"/>
    <van-image class="blogm-article--cover"
      width="100%"
      :src="article.cover"
    />
    <article v-html="article.content">
    </article>
  </div>
</template>

<script>
import ArticleBarInfo from '@/mviews/components/ArtcileBarInfo.vue'
export default {
  components:{
    ArticleBarInfo
  },
  data(){
    return {
    }
  },
  props: {
    article: {
      type: Object
    }
  },
created(){},
mounted(){},
watch:{},
computed:{
  nikname() {
    return this.article.author?.nikname
  },
  avatar() {
    return this.$store.state.userInfo.avatar
  },
  hit_num() {
    return this.article.hit_num
  },
  date() {
    return this.article.date
  },
  comment_num() {
    return this.article.comment_num
  },
  like_num() {
    return this.article.like_num
  }
},
methods:{},
}
</script>
<style lang="scss" scoped>
  .blogm-article--title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
  }
  .blogm-article--content {
    padding: 20px;
  }
  article {
    font-size: 16PX;
  }
  .blogm-article--cover {
    margin-bottom: 20px;
  }
</style>